<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left" id="do-nicescrol">
        <div class="row">
            <div class="col-12">
                <div class="card-box">

                    <div class="row">
                        <div class="col-lg-4 col-xs-12">
                            <h4 class="header-title m-t-0">默认</h4>
                            <p class="text-muted m-b-20 font-13">
                                你只需要用 <code>div</code> 来创建Raty.
                            </p>
                            <div id="default"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-sm-40">
                            <h4 class="header-title m-t-0">Score</h4>
                            <p class="text-muted m-b-20 font-13">
                                Used when we want to start with a saved rating.
                            </p>
                            <div id="score"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-sm-40">
                            <h4 class="header-title m-t-0">score回调</h4>
                            <p class="text-muted m-b-20 font-13">
                                如果需要根据动态值开始评分，则可以使用回调函数.
                                您可以为它传递任何值, 不一定是数据值. 例如，可以使用字段值.
                            </p>
                            <div id="score-callback" data-score="1"></div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">score名称</h4>
                            <p class="text-muted m-b-20 font-13">
                                更改隐藏得分字段的名称.
                            </p>
                            <div id="scoreName"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">scoreName</h4>
                            <p class="text-muted m-b-20 font-13">
                                在起始处改变数字.
                            </p>
                            <div id="number"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">Number callback</h4>
                            <p class="text-muted m-b-20 font-13">
                                你可以接收动态number使用回调设置t.
                            </p>
                            <div id="number-callback" data-number="3"></div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">最大Number</h4>
                            <p class="text-muted m-b-20 font-13">
                                在创造时设置最大值.
                            </p>
                            <div id="numberMax"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">只读</h4>
                            <p class="text-muted m-b-20 font-13">
                                你可以阻止用户投票. 它可以应用于有或没有得分，所有的点将接收到选定的点对应的提示.
                                停止鼠标覆盖可见:
                            </p>
                            <div id="readOnly"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">只读回调</h4>
                            <p class="text-muted m-b-20 font-13">
                                你可以决定如果评级将只读动态返回TRUE或者FALSE回调.
                            </p>
                            <div id="readOnly-callback" data-number="3"></div>
                        </div>
                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">没有评级的消息</h4>
                            <p class="text-muted m-b-20 font-13">
                                如果ReadOnly启用并没有分数, 提示“尚未评级！”
                                将显示在所有星星前. 但你可以改变它。把鼠标停在星星上看:
                            </p>
                            <div id="noRatedMsg"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">展示一半</h4>
                            <p class="text-muted m-b-20 font-13">
                                您可以将浮点分数表示为半星图标.
                            </p>
                            <div id="halfShow-true"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">展示一半 <small>Disabled</small></h4>
                            <p class="text-muted m-b-20 font-13">
                                你可以决定如果评级将只读动态返回TRUE或者FALSE在回调.
                            </p>
                            <div id="halfShow-false"></div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">圆</h4>
                            <p class="text-muted m-b-20 font-13">
                                我们更改了默认间隔 [x.25 .. x.76], 现在 x.26 会圆下来而不是成为一颗半星星.
                                记住，全属性仅用于halfshow时禁用.
                            </p>
                            <div id="round"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">半个</h4>
                            <p class="text-muted m-b-20 font-13">
                                使半颗星鼠标覆盖时是半值可投票.
                            </p>
                            <div id="half"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">半颗开始</h4>
                            <p class="text-muted m-b-20 font-13">
                                更改半星的名称.
                            </p>
                            <div id="starHalf"></div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">点击</h4>
                            <p class="text-muted m-b-20 font-13">
                                回调处理单击操作时的得分和单击事件.
                                你可以使用Raty element (DOM) 他本身来用使用.
                            </p>
                            <div id="click"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">Hints</h4>
                            <p class="text-muted m-b-20 font-13">
                                按数组位置更改每个星的提示.
                            </p>
                            <div id="hints"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0"星星开关</h4>
                            <p class="text-muted m-b-20 font-13">
                                更改星上和星上的名称.
                            </p>
                            <div id="star-off-and-star-on"></div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">关闭</h4>
                            <p class="text-muted m-b-20 font-13">
                                添加一个取消按钮在星星的左边cacel得分.
                                在单击回调时，当我们单击取消按钮时，参数代码接收值为null.
                            </p>
                            <div id="cancel"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">取消提示</h4>
                            <p class="text-muted m-b-20 font-13">
                                像星星, “取消”按钮也有提示，您可以更改它.
                            </p>
                            <div id="cancelHint"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">取消位置</h4>
                            <p class="text-muted m-b-20 font-13">
                                将取消按钮更改为右侧.
                            </p>
                            <div id="cancelPlace"></div>
                        </div>
                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">取消的开关</h4>
                            <p class="text-muted m-b-20 font-13">
                                更改“取消”按钮的“打开”和“关闭”图标.
                            </p>
                            <div id="cancel-off-and-cancel-on"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">图标的范围</h4>
                            <p class="text-muted m-b-20 font-13">
                                它是一组对象，每个对象代表一个自定义图标.
                                范围属性是直到显示图标的位置为止.
                            </p>
                            <div id="iconRange"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">尺寸</h4>
                            <p class="text-muted m-b-20 font-13">
                                图标的大小由CSS属性字体大小控制，因为所有图标都是文本. 该插件会自动计算字体大小, 如果失败了, 你可以提供一个 (in pixels)
                                尺寸选项.
                            </p>
                            <div id="size-md" class="rating-md"></div>

                            <div id="size-lg" class="rating-lg m-t-20"></div>
                        </div>
                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">目标</h4>
                            <p class="text-muted m-b-20 font-13">
                                有些地方显示的提示或cancelhint.<b id="target-div-hint"></b>
                            </p>
                            <div id="target-div"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">目标类型</h4>
                            <p class="text-muted m-b-20 font-13">
                                Y你可以选择提示或评分来选择. <b id="targetType-hint" class="label label-success"></b>
                            </p>
                            <div id="targetType"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">目标格式</h4>
                            <p class="text-muted m-b-20 font-13">
                                您可以选择一个模板与您的提示合并并显示在目标上.
                            </p>

                            <div class="text-xs-center">
                                <div id="targetFormat" class="rating-md"></div>

                                <input type="text" class="form-control" id="targetFormat-hint" />
                            </div>

                        </div>
                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">
                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">鼠标覆盖</h4>
                            <p class="text-muted m-b-20 font-13">
                                你可以通过鼠标覆盖实现这个动作.
                            </p>
                            <div id="mouseover"></div>
                        </div>

                        <div class="col-lg-4 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">鼠标离开</h4>
                            <p class="text-muted m-b-20 font-13">
                                你可以通过鼠标离开实现这个动作.
                            </p>
                            <div id="mouseout"></div>
                        </div>
                    </div>
                    <!-- end row -->

                </div>
            </div>
        </div>
        <!-- end row -->

    </div>
    <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>

        <!-- Rating js -->
        <script src="assets/plugins/raty-fa/jquery.raty-fa.js"></script>
        <!-- init -->
        <script src="assets/pages/jquery.rating.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <script type="text/javascript">
            $(document).ready(
                 function() { 
                  $("#do-nicescrol").niceScroll({oneaxismousemode: false,cursorcolor: "#999",horizrailenabled: false});
                 }
                );
        </script>

    </body>
</html>